<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<page-navbar :title="title"></page-navbar>

		<!-- 主要内容区域 -->
		<scroll-view class="main-content" scroll-y="true" :show-scrollbar="false">
			<!-- 景点标题 -->
			<view class="scenic-header">
				<image :src="common.defaultImg(scenicInfo.coverId)" @click="lookImage(scenicInfo.coverId)"
					mode="aspectFill" class="scenic-image"></image>
				<view class="scenic-title">
					{{ scenicInfo.name }}
					<!-- 标签 -->
					<view class="hotel-tags">
						<view class="tag" :class="common.getRandomTagColor()" v-for="(tag, index) in scenicInfo.tags"
							:key="index">{{
								tag.tag }}</view>
					</view>
				</view>
			</view>

			<view class="scenic-title-box">
				{{ title }}
			</view>

			<view class="description-card">
				<text class="description-text">{{ scenicInfo.introTitle }}</text>
			</view>
			<!-- 富文本内容 -->
			<view class="content-wrapper" v-if="scenicInfo.intro">
				<view class="rich-text-container">
					<rich-text class="rich-text" :nodes="scenicInfo.intro"></rich-text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import api from "@/api"
import common from "@/utils/common"

const imgUrl = uni.imgUrl
// 景点信息
const scenicInfo = ref({
	// name: '景点名称和介绍',
	// images: [
	// 	'https://picsum.photos/400/200?random=1',
	// 	'https://picsum.photos/400/200?random=2'
	// ],
	// intro: `<div style='background: white; padding: 15px 0; border-bottom: 1px solid #eee;'><img style='width: 100%; height: 200px; border-radius: 8px; margin-bottom: 10px;' src='https://picsum.photos/400/200?random=1' /></div><div style='line-height: 1.8; color: #333; font-size: 14px;'><p style='margin-bottom: 16px; text-indent: 2em;'>这里是景点的详细介绍内容。景点坐落在风景秀丽的地方，拥有丰富的自然资源和人文景观。游客可以在这里欣赏到壮丽的自然风光，感受大自然的魅力。</p><p style='margin-bottom: 16px; text-indent: 2em;'>景点历史悠久，文化底蕴深厚。这里曾经是古代重要的文化交流中心，留下了许多珍贵的历史遗迹和文化瑰宝。每一处景观都承载着深厚的历史文化内涵。</p><p style='margin-bottom: 16px; text-indent: 2em;'>游览建议：建议游客在春季或秋季前往，此时气候宜人，景色最为迷人。游览时间约需3-4小时，可以充分欣赏景点的美丽风光。</p><h3 style='color: #00A0E9; margin: 20px 0 12px 0; font-size: 16px;'>景点特色</h3><ul style='margin-left: 20px; margin-bottom: 16px;'><li style='margin-bottom: 8px;'>自然风光优美，四季景色各异</li><li style='margin-bottom: 8px;'>历史文化深厚，人文景观丰富</li><li style='margin-bottom: 8px;'>配套设施完善，服务质量优良</li><li style='margin-bottom: 8px;'>交通便利，适合各类游客前往</li></ul><h3 style='color: #00A0E9; margin: 20px 0 12px 0; font-size: 16px;'>开放时间</h3><p style='margin-bottom: 16px;'>夏季：08:00-18:00</p><p style='margin-bottom: 16px;'>冬季：08:30-17:30</p><h3 style='color: #00A0E9; margin: 20px 0 12px 0; font-size: 16px;'>交通指南</h3><p style='margin-bottom: 16px; text-indent: 2em;'>公交：乘坐1路、3路、5路公交车至景区站下车，步行5分钟即达。</p><p style='margin-bottom: 16px; text-indent: 2em;'>自驾：导航至景区停车场，停车位充足，收费合理。</p><p style='margin-top: 24px; text-align: center; color: #666; font-size: 12px;'>更多信息请关注官方网站或咨询服务热线</p></div>`
});

const title = ref('景点介绍')

onLoad((params) => {
	// 根据参数获取景点信息
	if (params.id) {
		getScenicDetail(params.id);
		title.value = '景点介绍'
	}
	if (params.type == 'all') {
		title.value = '景区介绍'
		getScenicList();
	}
});

onMounted(() => { });

const getScenicList = () => {
	api.attractionsApi.detailAttraction({ id: 1 }).then(res => {
		scenicInfo.value = res
	})
}

// 预览图片
const lookImage = (url) => {
	previewImage(imgUrl + url)
}

// 获取景点详情
const getScenicDetail = (id) => {
	api.attractionsApi.detailSpot({ id }).then(res => {
		scenicInfo.value = res
	})
};

// 返回上一页
const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
};

// 图片预览
const previewImage = (img) => {
	uni.previewImage({
		current: 0,
		urls: [img]
	});
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f2f1f6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 24rpx;
	box-sizing: border-box;

	/* H5环境下隐藏滚动条 */
	/* #ifdef H5 */
	/* 针对webkit内核浏览器 */
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	/* 针对Firefox */
	scrollbar-width: none;

	/* 通用样式 */
	-ms-overflow-style: none;

	/* 确保页面不出现横向滚动条 */
	overflow-x: hidden;
	/* #endif */
}

/* 描述卡片 */
.description-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(135, 206, 235, 0.1);

	.description-text {
		font-size: 28rpx;
		line-height: 1.6;
		color: #333;
	}
}


.main-content {
	flex: 1;
	overflow: hidden;

	/* H5环境下隐藏滚动条 */
	/* #ifdef H5 */
	/* 针对webkit内核浏览器 */
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	/* 针对Firefox */
	scrollbar-width: none;

	/* 通用样式 */
	-ms-overflow-style: none;
	/* #endif */
}

.scenic-header {
	background: white;
	margin-top: 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
	position: relative;

	.scenic-image {
		width: 100%;
		height: 450rpx;
		display: block;
	}

	.scenic-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		padding: 12rpx 24rpx;
		text-align: left;
		box-sizing: border-box;
	}
}

.hotel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;

	.tag {
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #333;
		font-weight: 500;
	}
}

.scenic-title-box {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}


.content-wrapper {
	background: white;
	margin-top: 20rpx;
	padding: 24rpx;
	border-radius: 16rpx;

	.rich-text-container {
		.rich-text {
			line-height: 1.8;
			color: #333;
			font-size: 28rpx;
		}
	}
}

/* H5环境下全局隐藏滚动条 */
/* #ifdef H5 */
:deep(*) {

	/* 针对webkit内核浏览器 */
	&::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	/* 针对Firefox */
	scrollbar-width: none !important;

	/* 通用样式 */
	-ms-overflow-style: none !important;
}

/* 确保页面和所有滚动容器都隐藏滚动条 */
:deep(scroll-view) {
	&::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

/* #endif */

/* 富文本样式优化 */
:deep(.rich-text) {
	p {
		margin-bottom: 24rpx;
		text-indent: 2em;
		line-height: 1.8;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: #00A0E9;
		margin: 40rpx 0 24rpx 0;
		font-weight: bold;
	}

	ul,
	ol {
		margin-left: 40rpx;
		margin-bottom: 24rpx;

		li {
			margin-bottom: 16rpx;
		}
	}

	img {
		max-width: 100%;
		height: auto;
		border-radius: 8rpx;
		margin: 16rpx 0;
	}
}
</style>
